<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> 
<HTML> 
  <HEAD> 
    <TITLE>WashU EpiGenome Browser</TITLE> 
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="base.js"></script>
    <script type="text/javascript" src="gsm.js"></script>
    <script type="text/javascript" src="fileload.js"></script>
    <script type="text/javascript" src="geneplot.js"></script>
    <script type="text/javascript" src="circlet.js"></script>
    <script type="text/javascript" src="session.js"></script>
    <script type="text/javascript" src="scp.js"></script>
    <script type="text/javascript" src="bev.js"></script>
	<script type="text/javascript" src="validhub.js"></script>
    <script type="text/javascript" src="sukn.js"></script>
    <script type="text/javascript" src="personality.js"></script>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=UTF8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
  </HEAD> 

<BODY onload='readygo()'> 
<img id=hypothetical></img>
<!--[if IE]>
<div style='position:absolute;z-index:1000;left:20px;top:40px;font-size:30px;background-color:#ededed;border:solid 8px #858585;padding:30px;'>
<b>Sorry!</b> You're using an old version of Microsoft IE and we do not support that.
<br><br>
You can upgrade to IE10, or use one of these open-source web browsers:
<div style='margin:20px;text-align:center;font-size:inherit;'>
<a href=https://www.google.com/intl/en/chrome/browser/ target=_blank>Google Chrome</a>,
<a href=http://www.mozilla.org/en-US/firefox/new/ target=_blank>Firefox</a>, 
<a href=http://www.chromium.org/Home target=_blank>Chromium</a>
</div>
<span style='font-size:80%;'>And make sure whatever you're using is up-to-date.</span>
<br>
<br>
<span style='font-size:50%;'>We hope this tip is helpful. Feel free to provide feedback by
<a href=http://washugb.blogspot.com/ target=_blank>commenting on our blog</a>
</span>
</div>
<![endif]-->
<style type='text/css'>
BODY {font:15px arial,sans-serif;
margin:0px;
background-color:rgb(182,185,164);
background-image:url("images/bg.jpg");
}
.olinebut { /* overline button */
    cursor:pointer;
    border-top:solid 2px transparent;
    padding-top:2px; padding-left:2px;
}
.olinebut:hover {border-color:#956584;}
td.headerTd {
  background-color:transparent;
  color:black;
  padding:7px;
  cursor:pointer;
  opacity:0.3;
}
td.headerTd:hover {
  opacity:0.8;
}
button.big {
    border-radius:3px;-moz-border-radius:3px;
    border:solid 1px #fb8f3d;
    background:-webkit-gradient(linear,left top,left bottom,from(#fda251),to(#fb8f3d));
    background:-moz-linear-gradient(top,#fda251,#fb8f3d);
    padding:5px;padding-left:10px;padding-right:10px;
    color:white;
    font-weight:bold;
}
button.big:hover {
    border-color:#F97F22;
    background:-webkit-gradient(linear,left top,left bottom,from(#fda251),to(#F97F22));
    background:-moz-linear-gradient(top,#fda251,#F97F22);
}
A.opt { text-decoration: none; color: white; }

div.oneshot {
width:257px;height:39px;
position:relative;cursor:default;
overflow:hidden;
}
div.oneshot>:first-child { /* image */
border-radius:5px; -moz-border-radius:5px;
}
div.oneshot>:nth-child(2) { /* Human hg19 */
position:absolute;
left:0px;
bottom:0px;
color:white;
font-size:12px;
padding:0px 5px 0px 5px;
width:100%;
/*border-top:solid 1px rgba(255,255,255,0.1);
*/
}
div.oneshot>:nth-child(3) { /* slim */
display:none;
position:absolute;
right:5px;
bottom:3px;
border-radius:10px; -moz-border-radius:10px;
font-size:10px;
font-weight:bold;
padding:2px 7px;
background-color:#ccc;
color:#545454;
}
div.oneshot>:nth-child(3):hover {background-color:white;color:black;}

/*
div.pac { width: 15px; height: 15px; display:inline-block;background-color:rgb(255,0,0); }
*/
div.hlo { /* oval shape for hightlight */
    display:table;
    background-color:#E3DFD8;
    border-radius:15px;-moz-border-radius:15px;
    overflow:hidden;
    padding:1px;padding-left:10px;
}
div.kmeansclusterbutton { /* buttons for kmeans clusters */
    text-align:center;
    color:black;
    font-size:10px;
    cursor:pointer;
    width:100px;
    overflow:hidden;
    background:-webkit-gradient(linear,left top,left bottom,from(#fff9d2),to(#FFF5B8));
    background:-moz-linear-gradient(top,#fff9d2,#FFF5B8);
}
div.kmeansclusterbutton:hover { 
    background:-webkit-gradient(linear,left top,left bottom,from(#FFFCEB),to(#FFF09E));
    background:-moz-linear-gradient(top,#FFFCEB,#FFF09E);
color:white; }
p { font-size: 14px; font-weight:normal;color:black}
td {font-size: 14px;}
td.c1 {font-size:14px;background-color:#fff9d2;}
td.c2 { /* under focus, table tab */
    font-size:14px;font-weight:bold;color:#545454;background-color:#fff9d2;text-align:center;
    border-top-left-radius:10px;border-top-right-radius:10px;
    -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px;
    padding:4px;
}
td.c3 { /* not under focus */
    font-size:14px;font-weight:bold;color:#fff9d2;text-align:center;
    cursor:pointer;padding:4px;
    border-top-left-radius:10px;border-top-right-radius:10px;
    -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px;
    border:1px solid #fff9d2;
    background-color:transparent;
}
td.c3:hover {
    background:-webkit-gradient(linear,left top, left bottom, from(#6e6e6e), to(#aaa));
    background:-moz-linear-gradient(top, #6e6e6e, #aaa);
}
td.bevwrench { /* holder of wrench in bev vector registry */
border-radius:2px;-moz-border-radius:2px;overflow:hidden;width:20px;
}
td.s1 {font:12px "sans-serif";padding-right:4px;}
td.hgstripe{ /* horizontal gradient stripe, for decor group header */
    font-weight:bold;
    color:#9e9e9e;
    background:-webkit-gradient(linear,left top, right top, from(#dbdbdb), to(#fff9d2));
    background:-moz-linear-gradient(left, #dbdbdb, #fff9d2);
    padding-left:5px;
}
div.ftb_spanel{ /* small panel in ftb */
    margin-top:5px; margin-bottom:5px;
    border:solid 1px #CBBA9A;
    border-radius:5px; -moz-border-radius:5px;
    overflow:hidden;
    display:none;
}
div.ftb_spanel>:first-child {
    position:relative;
    font-weight:bold;
    color:white;
    padding:3px;
    padding-left:8px;
    background:-webkit-gradient(linear,left top,right top,from(#CBBA9A),to(#DCD0BC));
    background:-moz-linear-gradient(left,#b39b6b,#f0ebe2);
}
div.ftb_spanel>:nth-child(2) {
    padding:2px;
    background-color:white;
}

div.listholder {
border:dashed 1px #fe6602;border-left-width:0px;border-right-width:0px;
}

table.error {
	background-color: #9e0028;
	color: #fff;
	font-size: 18;
	margin-bottom: 2px;
	border-style: none;
	width: 800px;
	padding: 0;
}
div.bordertb { /* with header */
    background-color:#FCF8EE;
    border-top:solid 1px #BAAE98;
    border-bottom:solid 1px #E5DDCF;
    margin-top:5px;
    /*
    border:solid 1px #E9E2D5;
    border-bottom:solid 1px #D9D1C2;
    */
}
div.bordertb>:first-child {
    padding:5px;
    padding-right:20px;
    font-size:14px; font-weight:bold;
    color:#B592A8;
    text-align:left;
    position:relative;
}
div.bordertb>:nth-child(2) {
    padding:10px;
}
/* context menus */
div.menustaticchoice {
	padding:5px;opacity:0.4;background-color:#e0e0e0;color:#757575;
	border-top:dashed 1px #ccc;border-left:solid 1px #f0eeee;}
/* group 1/2/.. selector for htest/pairwise in menu */
div.groupselector {border-radius:3px;-moz-border-radius:3px;display:inline-block;border:solid 1px transparent;text-align:center;cursor:pointer;padding-left:3px;padding-right:3px;height:17px;}
div.groupselector:hover {border-color:black;}
select.s1 {font-size:12px;background-color:white;}
select.s2 {font-size:12px;}
input.s1 {font-size:12px;}

/* clickables */
div.clb2 {cursor:pointer;color:black;background-color:transparent;font-size:9px;overflow:hidden;white-space:nowrap;} /* for tkLst[x].labeldiv */
div.clb2:hover {background-color:#007399;color:white;}
div.clb4 {background-color:#007399;color:white;font-size:9px;overflow:hidden;}
label {cursor:pointer;}
label.clb {cursor: pointer; background-color:transparent; border-bottom:dashed 1px transparent;}
label.clb:hover {background-color:white; border-bottom-color:#009e00;}

p.clb {cursor:pointer;color:blue;}
p.clb:hover {background-color:white;text-decoration:underline;}
img.clb {}
img.clb:hover {cursor:pointer;}
img.clbicon {opacity:0.6;cursor:pointer;}
img.clbicon:hover {opacity:1;}
div.stickynote {
    display:block;
    position:absolute;
    border:solid 1px #CCC07C;
    border-top-color:white;
    border-left-color:white;
    background:-webkit-gradient(linear,left top,left bottom,from(#F3E490),to(#F0E8B7));
    background:-moz-linear-gradient(top,#F3E490,#F0E8B7);
    background-color:#F3E490;
}
div.stickynote>:first-child {
    background-color:transparent;
    border-width:0px;
    overflow-y:hidden;
}
div.stickynote>:nth-child(2) {
    position:absolute;
    display:none;
    right:0px;
    top:0px;
}
div.stickynote>:nth-child(3) {
    position:absolute;
    display:none;
    right:0px;
    top:0px;
}
</style>


<!-- page header -->
<div>
<table border=0 cellpadding=0 cellspacing=0><tr>
  <!-- 1 wugb name -->
  <td valign=middle>
    <div id=washucuddle style='font-size:18px;font-weight:bold;padding:0px 10px; cursor:default;padding:5px 10px;position:relative;'></div>
  </td>
  <!-- 2 genome-->
  <td class=headerTd id=genomelogoartholder onmouseup='toggle3(event)' align=center style='color:white;width:243px;padding:0px;'></td>
  <td class=headerTd onclick='sukn_resource(event)' style="font-weight:bold;">Resources &#9662;</td>
</tr></table>
</div>
<!-- page header ends -->




<!-- black background, not in use -->
<div style='background-color:white;'>
	<div id=bbbb style='padding-top:15px;padding-bottom:15px;opacity:1;
box-shadow: 0px 0px 3px 3px rgba(50,50,50,0.15);
-moz-box-shadow: 0px 0px 3px 3px rgba(50,50,50,0.15);
-webkit-box-shadow: 0px 0px 3px 3px rgba(50,50,50,0.15);
border-top:solid 1px white;
'>
		<div id=sukn_main style='display:table;'></div>
		<div id=additional_genomes_div></div>
	</div> <!-- bbbb ends -->
</div>
<!-- black background ends -->



<div style='padding:5px;color:rgba(0,0,0,0.4);text-align:center;
'>COPYRIGHT &copy; WUSTL</div>

<!-- end of page footer -->



<div id=scalebarbeam style='display:none;position:absolute;left:0px;border:dashed 1px black;border-top-width:0px;border-bottom-width:0px;'></div>


<!-- __ftb__ floating toolbox -->
<div id=floatingtoolbox style='
position:fixed;
right:20px;top:-6px;
padding:1px;
background-color:#858585;
border-radius:5px; -moz-border-radius:5px;
overflow:hidden;
z-index:101;
'>
<div style='border-radius:5px;-moz-border-radius:5px;background-color:white;padding:2px;'>
  <div style='border-radius:5px;-moz-border-radius:5px;background-color:#f0ebe2;overflow:hidden;'>



<!-- custom track metadata annotation editing -->
<div id=custtkmdanno_editholder class=bordertb style='display:none;'><div>Edit metadata annotation</div><div>
    <p id=custtkmdanno_editsaysno>No metadata annotation.<br>
    Click button to annotate.</p>
    <table id=custtkmdanno_showholder cellspacing=1 cellpadding=3 style='display:none;background-color:#C2B0C2;'><tbody><tr><td colspan=3 style='color:white;'>Metadata annotation</td></tr></tbody></table>
    <p><button type=button onclick='custtkmdannoedit_invokemds(event)'>Make new annotation &#187;</button></p>
	<button type=button onclick="document.getElementById('custtkmdanno_editholder').style.display='none';">Close</button>
  </div>
</div>
<!-- custom track metadata ends -->

<div id=bait27 style='position:relative;display:block;margin-top:2px;
background-color:#FAF6F0;
border-top:solid 1px #DED3BF;'>
<div id=msgconsole class=msgconsole
style='margin-top:3px;
width:260px;
height:30px;'
></div>
</div>
</div></div>

</div>
<!-- __ftb__ ends -->


</body>
</html>
